<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏 - 中山大学刷题平台</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-green': '#045525',       // 校色主绿
                        'sysu-lightGreen': '#E6F0EA',  // 浅绿辅助色
                        'sysu-darkGreen': '#03441D',   // 深绿
                        'sysu-gray': '#F7F9FC',        // 浅灰背景色
                        'sysu-card': '#FFFFFF',        // 卡片背景
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <!-- 自定义工具类与基础样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .btn-sysu {
                @apply bg-sysu-green text-white px-4 py-2 rounded-lg hover:bg-sysu-darkGreen transition-all duration-300 shadow-sm hover:shadow;
            }
            .btn-outline {
                @apply bg-white border border-gray-300 text-gray-700 px-4 py-2 rounded-lg hover:border-sysu-green hover:text-sysu-green transition-all duration-300;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .tag {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .pagination-item {
                @apply px-3 py-2 rounded border border-gray-300 text-gray-700 hover:border-sysu-green hover:text-sysu-green transition-colors;
            }
            .pagination-item.active {
                @apply bg-sysu-green text-white border-sysu-green;
            }
            .pagination-item.disabled {
                @apply border-gray-200 text-gray-400 cursor-not-allowed hover:border-gray-200 hover:text-gray-400;
            }
            .badge {
                @apply px-2.5 py-1 rounded-full text-xs font-medium;
            }
            .fade-in {
                opacity: 0;
                transform: translateY(15px);
                transition: opacity 0.6s ease-out, transform 0.6s ease-out;
            }
            .fade-in.visible {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans opacity-0 transition-opacity 0.8s ease-out" id="page-body">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300 shadow-sm fade-in">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-green text-white rounded-lg flex items-center justify-center mr-3 shadow-sm">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-green">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航 -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-green after:transition-all after:duration-300">首页</a>
                    <a href="/questions" class="text-gray-600 hover:text-sysu-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-green after:transition-all after:duration-300">题库</a>
                    <a href="/contests" class="text-gray-600 hover:text-sysu-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-green after:transition-all after:duration-300">竞赛</a>
                    <a href="/ranking" class="text-gray-600 hover:text-sysu-green py-5 transition-colors relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 hover:after:w-full after:bg-sysu-green after:transition-all after:duration-300">排行榜</a>
                    <a href="/resources" class="text-gray-600 hover:text-sysu-green py-5 transition-colors">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="relative hidden sm:block group">
                        <input type="text" placeholder="搜索题目"
                               class="pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-green focus:outline-none text-sm w-40 lg:w-56 transition-all duration-300 group-hover:border-gray-400 focus:w-56 lg:focus:w-64">
                        <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm transition-colors group-hover:text-sysu-green"></i>
                    </div>

                    <!-- 用户区域 -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-green rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden text-gray-600 hover:text-sysu-green transition-colors" id="mobile-menu-btn">
                        <i class="fa fa-bars text-lg"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端导航 -->
            <div class="md:hidden hidden pb-3 animate-fadeIn" id="mobile-menu">
                <div class="flex items-center relative mb-3 mx-2">
                    <input type="text" placeholder="搜索题目"
                           class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-green focus:outline-none text-sm">
                    <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
                </div>
                <nav class="flex flex-col space-y-2 mx-2">
                    <a href="/" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">首页</a>
                    <a href="/questions" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">题库</a>
                    <a href="/contests" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">竞赛</a>
                    <a href="/ranking" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">排行榜</a>
                    <a href="/resources" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightGreen rounded transition-colors">学习资源</a>
                </nav>
            </div>
        </div>
    </header>

    <main class="container mx-auto px-4 py-6">
        <!-- 页面标题与控制区 -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4 fade-in">
            <div>
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">我的收藏</h2>
                <p class="text-gray-500 mt-1">管理您收藏的所有题目</p>
            </div>

            <div class="flex flex-wrap gap-3 w-full sm:w-auto">
                <button id="clear-all-btn" class="flex items-center btn-outline">
                    <i class="fa fa-trash mr-2"></i> 清空收藏
                </button>

                <button id="export-btn" class="flex items-center btn-sysu">
                    <i class="fa fa-download mr-2"></i> 导出收藏
                </button>
            </div>
        </div>

        <!-- 搜索区域 -->
        <div class="mb-6 fade-in">
            <div class="relative">
                <input type="text" placeholder="搜索收藏题目..." id="search-favorites"
                       class="w-full py-3 pl-10 pr-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-sysu-green/50 focus:border-sysu-green text-sm transition-all">
                <i class="fa fa-search absolute left-3 top-3.5 text-gray-400 transition-colors focus-within:text-sysu-green"></i>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="flex flex-wrap gap-2 mb-6 fade-in">
            <button class="px-3 py-1 rounded-full bg-sysu-green text-white text-sm">全部难度</button>
            <button class="px-3 py-1 rounded-full bg-white border border-gray-300 text-gray-700 text-sm hover:border-sysu-green hover:text-sysu-green transition-colors">简单</button>
            <button class="px-3 py-1 rounded-full bg-white border border-gray-300 text-gray-700 text-sm hover:border-sysu-green hover:text-sysu-green transition-colors">中等</button>
            <button class="px-3 py-1 rounded-full bg-white border border-gray-300 text-gray-700 text-sm hover:border-sysu-green hover:text-sysu-green transition-colors">困难</button>
        </div>

        <!-- 收藏列表 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden mb-6 fade-in">
            <div class="divide-y divide-gray-100" id="favorites-list">
                <!-- 收藏题目示例 1 -->
                <div class="p-4 hover:bg-sysu-lightGreen/30 transition-all">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-1">
                                <h3 class="font-medium text-gray-800 hover:text-sysu-green transition-colors">
                                    <a href="/question/1">两数之和</a>
                                </h3>
                                <span class="badge bg-green-100 text-green-800">简单</span>
                            </div>
                            <p class="text-gray-500 text-sm line-clamp-2">给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回它们的数组下标。</p>
                            <div class="flex flex-wrap gap-2 mt-2">
                                <span class="tag bg-gray-100 text-gray-700">数组</span>
                                <span class="tag bg-gray-100 text-gray-700">哈希表</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-sm text-gray-500">收藏于 2023-05-15</span>
                            <button class="text-gray-400 hover:text-red-500 transition-colors" title="取消收藏">
                                <i class="fa fa-times-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 收藏题目示例 2 -->
                <div class="p-4 hover:bg-sysu-lightGreen/30 transition-all">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-1">
                                <h3 class="font-medium text-gray-800 hover:text-sysu-green transition-colors">
                                    <a href="/question/2">三数之和</a>
                                </h3>
                                <span class="badge bg-yellow-100 text-yellow-800">中等</span>
                            </div>
                            <p class="text-gray-500 text-sm line-clamp-2">给你一个包含 n 个整数的数组 nums，判断 nums 中是否存在三个元素 a，b，c ，使得 a + b + c = 0 ？请你找出所有和为 0 且不重复的三元组。</p>
                            <div class="flex flex-wrap gap-2 mt-2">
                                <span class="tag bg-gray-100 text-gray-700">数组</span>
                                <span class="tag bg-gray-100 text-gray-700">双指针</span>
                                <span class="tag bg-gray-100 text-gray-700">排序</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-sm text-gray-500">收藏于 2023-05-10</span>
                            <button class="text-gray-400 hover:text-red-500 transition-colors" title="取消收藏">
                                <i class="fa fa-times-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 收藏题目示例 3 -->
                <div class="p-4 hover:bg-sysu-lightGreen/30 transition-all">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-3">
                        <div class="flex-1">
                            <div class="flex items-center gap-3 mb-1">
                                <h3 class="font-medium text-gray-800 hover:text-sysu-green transition-colors">
                                    <a href="/question/3">四数之和</a>
                                </h3>
                                <span class="badge bg-yellow-100 text-yellow-800">中等</span>
                            </div>
                            <p class="text-gray-500 text-sm line-clamp-2">给你一个由 n 个整数组成的数组 nums ，和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]]。</p>
                            <div class="flex flex-wrap gap-2 mt-2">
                                <span class="tag bg-gray-100 text-gray-700">数组</span>
                                <span class="tag bg-gray-100 text-gray-700">双指针</span>
                                <span class="tag bg-gray-100 text-gray-700">排序</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-sm text-gray-500">收藏于 2023-05-05</span>
                            <button class="text-gray-400 hover:text-red-500 transition-colors" title="取消收藏">
                                <i class="fa fa-times-circle"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 空状态（当没有收藏时显示） -->
                <!-- <div class="text-center py-12">
                    <i class="fa fa-bookmark-o text-4xl text-gray-300 mb-4"></i>
                    <h3 class="text-lg font-medium text-gray-700 mb-2">暂无收藏题目</h3>
                    <p class="text-gray-500 mb-6">去题库浏览并收藏感兴趣的题目吧</p>
                    <a href="/questions" class="inline-flex items-center btn-sysu">
                        <i class="fa fa-list-ul mr-2"></i> 浏览题库
                    </a>
                </div> -->
            </div>
        </div>

        <!-- 分页 -->
        <div class="flex justify-center mt-8 fade-in">
            <nav class="flex items-center space-x-1">
                <!-- 上一页 -->
                <a href="javascript:;" class="pagination-item text-sm disabled" data-type="prev">
                    <i class="fa fa-chevron-left"></i>
                </a>
                <!-- 页码项 -->
                <a href="javascript:" class="pagination-item active text-sm" data-type="page" data-page="1">1</a>
                <a href="javascript:" class="pagination-item text-sm" data-type="page" data-page="2">2</a>
                <a href="javascript:" class="pagination-item text-sm" data-type="page" data-page="3">3</a>
                <!-- 省略号 -->
                <span class="px-2 text-gray-500 text-sm">...</span>
                <!-- 最后一页 -->
                <a href="javascript:" class="pagination-item text-sm" data-type="page" data-page="10">10</a>
                <!-- 下一页 -->
                <a href="javascript:;" class="pagination-item text-sm" data-type="next">
                    <i class="fa fa-chevron-right"></i>
                </a>
            </nav>
        </div>
    </main>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 显示页面元素动画
            setTimeout(() => {
                document.getElementById('page-body').classList.add('opacity-100');
                document.querySelectorAll('.fade-in').forEach((el, index) => {
                    setTimeout(() => {
                        el.classList.add('visible');
                    }, 100 * index);
                });
            }, 100);

            // 检查登录状态
            checkLoginStatus();

            // 移动端菜单切换
            const mobileMenuBtn = document.getElementById('mobile-menu-btn');
            const mobileMenu = document.getElementById('mobile-menu');
            if (mobileMenuBtn && mobileMenu) {
                mobileMenuBtn.addEventListener('click', () => {
                    mobileMenu.classList.toggle('hidden');
                });
            }

            // 取消收藏功能
            document.querySelectorAll('#favorites-list button[title="取消收藏"]').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const item = this.closest('div[class*="p-4"]');
                    if (confirm('确定要取消收藏这道题目吗？')) {
                        // 添加删除动画
                        item.classList.add('opacity-0', 'transform', 'translate-x-4', 'transition-all', 'duration-300');
                        setTimeout(() => {
                            item.remove();
                            // 检查是否还有收藏项
                            checkEmptyState();
                        }, 300);
                    }
                });
            });

            // 清空收藏功能
            const clearAllBtn = document.getElementById('clear-all-btn');
            if (clearAllBtn) {
                clearAllBtn.addEventListener('click', function() {
                    const items = document.querySelectorAll('#favorites-list > div[class*="p-4"]');
                    if (items.length === 0) return;

                    if (confirm('确定要清空所有收藏题目吗？此操作不可恢复。')) {
                        items.forEach((item, index) => {
                            setTimeout(() => {
                                item.classList.add('opacity-0', 'transform', 'translate-x-4', 'transition-all', 'duration-300');
                                setTimeout(() => item.remove(), 300);
                            }, 100 * index);
                        });

                        // 全部删除后显示空状态
                        setTimeout(checkEmptyState, 300 + 100 * items.length);
                    }
                });
            }

            // 导出收藏功能
            const exportBtn = document.getElementById('export-btn');
            if (exportBtn) {
                exportBtn.addEventListener('click', function() {
                    alert('正在导出收藏题目列表...');
                    // 实际项目中这里会实现导出功能
                });
            }

            // 搜索收藏题目
            const searchInput = document.getElementById('search-favorites');
            if (searchInput) {
                searchInput.addEventListener('input', function() {
                    const searchTerm = this.value.toLowerCase().trim();
                    const items = document.querySelectorAll('#favorites-list > div[class*="p-4"]');

                    items.forEach(item => {
                        const title = item.querySelector('h3').textContent.toLowerCase();
                        const content = item.querySelector('p').textContent.toLowerCase();
                        const tags = Array.from(item.querySelectorAll('.tag')).map(tag => tag.textContent.toLowerCase()).join(' ');

                        if (title.includes(searchTerm) || content.includes(searchTerm) || tags.includes(searchTerm)) {
                            item.style.display = '';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            }

            // 检查空状态并显示相应内容
            function checkEmptyState() {
                const items = document.querySelectorAll('#favorites-list > div[class*="p-4"]');
                const favoritesList = document.getElementById('favorites-list');

                if (items.length === 0) {
                    favoritesList.innerHTML = `
                        <div class="text-center py-12">
                            <i class="fa fa-bookmark-o text-4xl text-gray-300 mb-4"></i>
                            <h3 class="text-lg font-medium text-gray-700 mb-2">暂无收藏题目</h3>
                            <p class="text-gray-500 mb-6">去题库浏览并收藏感兴趣的题目吧</p>
                            <a href="/questions" class="inline-flex items-center btn-sysu">
                                <i class="fa fa-list-ul mr-2"></i> 浏览题库
                            </a>
                        </div>
                    `;
                }
            }

            // 登录状态检查函数（复用项目中已有的逻辑）
            async function checkLoginStatus() {
                const container = document.getElementById('user-area-container');
                const loadingIndicator = document.getElementById('loading-indicator');

                try {
                    const token = localStorage.getItem('token');
                    const response = await fetch('/api/check_login', {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': 'Bearer ' + token
                        }
                    });

                    if (!response.ok) {
                        throw new Error('验证请求失败');
                    }

                    const data = await response.json();

                    if (data.is_logged_in) {
                        renderLoggedInView(container, data || {});
                    } else {
                        renderLoggedOutView(container);
                    }
                } catch (error) {
                    console.error('登录状态验证出错:', error);
                    renderLoggedOutView(container);
                } finally {
                    if (loadingIndicator) {
                        loadingIndicator.remove();
                    }
                }
            }

            // 渲染已登录视图
            function renderLoggedInView(container, userData) {
                container.innerHTML = `
                    <div class="relative" id="userDropdown">
                        <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                            <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                                 alt="${userData.username || '用户头像'}"
                                 class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-green transition-colors">
                            <i class="fa fa-angle-down text-gray-500 hidden sm:block transition-transform duration-300" id="dropdownIcon"></i>
                        </button>
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50" id="dropdownMenu">
                            <a href="/profile/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightGreen hover:text-sysu-green transition-colors">个人中心</a>
                            <a href="/my_progress/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightGreen hover:text-sysu-green transition-colors">学习进度</a>
                            <a href="/favorites" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightGreen hover:text-sysu-green transition-colors bg-sysu-lightGreen text-sysu-green">我的收藏</a>
                            <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightGreen hover:text-sysu-green transition-colors" onclick="logout()">退出登录</a>
                        </div>
                    </div>
                `;

                // 绑定下拉菜单事件
                bindDropdownEvents();
            }

            // 渲染未登录视图
            function renderLoggedOutView(container) {
                container.innerHTML = `
                    <div class="flex items-center space-x-3">
                        <a href="/login" class="text-gray-600 hover:text-sysu-green transition-colors px-3 py-2 rounded-md text-sm font-medium">
                            登录
                        </a>
                        <a href="/register" class="bg-sysu-green text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-sysu-darkGreen transition-colors">
                            注册
                        </a>
                    </div>
                `;
            }

            // 绑定下拉菜单事件
            function bindDropdownEvents() {
                const trigger = document.getElementById('dropdownTrigger');
                const menu = document.getElementById('dropdownMenu');
                const icon = document.getElementById('dropdownIcon');

                if (trigger && menu && icon) {
                    trigger.addEventListener('click', () => {
                        menu.classList.toggle('hidden');
                        icon.classList.toggle('rotate-180');
                    });

                    // 点击外部关闭下拉菜单
                    document.addEventListener('click', (e) => {
                        if (!trigger.contains(e.target) && !menu.contains(e.target)) {
                            menu.classList.add('hidden');
                            icon.classList.remove('rotate-180');
                        }
                    });
                }
            }

            // 退出登录函数
            window.logout = function() {
                try {
                    const token = localStorage.getItem('token');
                    fetch('/api/v1/logout', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Authorization': 'Bearer ' + token
                        }
                    }).then(() => {
                        localStorage.removeItem('token');
                        window.location.href = '/';
                    });
                } catch (error) {
                    console.error('退出登录出错:', error);
                }
            }
        });
    </script>
</body>
</html>